<template>
  <div>
    <div class="records-header">
      <el-button type="primary" @click="handerDrawer('添加记录')"  plain>
        添加记录
      </el-button>
    </div>
    <div class="container" id="con">
      <div class="item">
        <div class="title" @click="handerDrawer('修改记录')">2021年1月</div>
        <div class="content" @click="handerDrawer('修改记录')">
          这个月一定要存到2w块钱啊～最多就花2千不能花多！！！
        </div>
      </div>
      <div class="item">
        <div class="title" @click="handerDrawer('修改记录')">2021年1月5日</div>
        <div class="content" @click="handerDrawer('修改记录')">
          今天同事过生日 没办法了 哎 又花钱了
        </div>
      </div>
      <div class="item">
        <div class="title" @click="handerDrawer('修改记录')">标题</div>
        <div class="content" @click="handerDrawer('修改记录')">
          内容内容内容内容内容内容内容内容内容内容内容内容内容，内容内容内容，内容内容内容内容内容
        </div>
      </div>
      <div class="item">
        <div class="title" @click="handerDrawer('修改记录')">标题</div>
        <div class="content" @click="handerDrawer('修改记录')">
          内容内容内容内容内容内容，内容内容内容内容内容内容内容，内容内容内容内容内容内容
        </div>
      </div>
      <div class="item">
        <div class="title" @click="handerDrawer('修改记录')">标题</div>
        <div class="content" @click="handerDrawer('修改记录')">
          内容内容内容，内容内容内容内容，内容内容内容内容
        </div>
      </div>
      <div class="item">
        <div class="title" @click="handerDrawer('修改记录')">标题</div>
        <div class="content" @click="handerDrawer('修改记录')">
          内容内容内容内容内容内容内容内容内容内容内容，内容内容内容内容内容内容内容内容内容内容内容，内容内容内容内容内容
        </div>
      </div>
      <div class="item">
        <div class="title" @click="handerDrawer('修改记录')">标题</div>
        <div class="content" @click="handerDrawer('修改记录')">
          内容内容内容内容内容内容内容内容内容内容内容，内容内容内容内
        </div>
      </div>
      <div class="item">
        <div class="title" @click="handerDrawer('修改记录')">标题</div>
        <div class="content" @click="handerDrawer('修改记录')">
          内容内容内容内容内容内容内容内容内容内容内容，内容内容内容内容内容内容内容内容，内容内容内容内容内容内容内容内容，内容内容内容内容内容内容内容内容内容内容内容内容内容内容，内容内容内容内
        </div>
      </div>
      <div class="item">
        <div class="title" @click="handerDrawer('修改记录')">标题</div>
        <div class="content" @click="handerDrawer('修改记录')">
          内容内容内容内容内容内容内容内容内容内容内容，内容内容内容内内容内容内容内容内容内容内容内
        </div>
      </div>
      <div class="item">
        <div class="title" @click="handerDrawer('修改记录')">标题</div>
        <div class="content" @click="handerDrawer('修改记录')">
          内容内容内容内容内容内容内容内容内容内容内容
        </div>
      </div>
      <div class="item">
        <div class="title" @click="handerDrawer('修改记录')">标题</div>
        <div class="content" @click="handerDrawer('修改记录')">
          内容内容内容内容内容内容内容内容内容内容内容，内容内容内容内内容内容内容内容内容内容内容内
        </div>
      </div>
      <div class="item">
        <div class="title" @click="handerDrawer('修改记录')">标题</div>
        <div class="content" @click="handerDrawer('修改记录')">
          内容内容内容内容内容内容内容内容内容内容内容
        </div>
      </div>
      <div class="item">
        <div class="title" @click="handerDrawer('修改记录')">标题</div>
        <div class="content" @click="handerDrawer('修改记录')">
          内容内容内容内容内容内容内容内容内容内容内容，内容内容内容内内容内容内容内容内容内容内容内
        </div>
      </div>
      <div class="item">
        <div class="title" @click="handerDrawer('修改记录')">标题</div>
        <div class="content" @click="handerDrawer('修改记录')">
          内容内容内容内容内容内容内容内容内容内容内容
        </div>
      </div>
    </div>
    <el-drawer
      :title="drawerTitle"
      :visible.sync="drawer"
      direction="rtl"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="form.classifyName"></el-input>
        </el-form-item>

        <el-form-item label="内容">
          <el-input type="textarea" v-model="form.remark"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handerAdd" plain>
            {{drawerTitle}}
          </el-button>
        </el-form-item>
        <el-form-item v-show="drawerTitle=='修改记录'">
          <el-button type="danger" @click="handerAdd" plain>
            删除记录
          </el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      drawer: false,
      form: {
        classifyName: "",
        remark: "",
      },
      drawerTitle:'',
    };
  },
  mounted() {
    //当页面加载的时候调用
    window.onload = function () {
      //页面初始化调用
      waterFall();
      //每次页面改变大小调用
      window.onresize = waterFall;
    };
    waterFall();
    function waterFall() {
      // 1. 设置container盒子的宽度
      //      注意：浏览器的可视区域的宽度 / 一个item元素的宽度 = 一行的排列的元素的个数
      // let container = document.getElementById("con");
      let item = document.getElementsByClassName("item");
      //获取元素的宽度(含border，padding)
      let width = item[0].offsetWidth;
      //计算出浏览器窗口的宽度
      let clientWidth = document.documentElement.clientWidth - 250;
      //计算出应该放几列（向下取整）
      let columnCount = Math.floor(clientWidth / width);
      //设置容器（父盒子）的宽度
      // container.style.width = document.documentElement.clientWidth - 240 + "px";

      // 2.设置每一个item元素的排列位置
      //  第一行整体的top值都是0 后面的依次找上一行高度最小的容器，在它下面进行排列
      let hrr = [];
      for (let i = 0; i < item.length; i++) {
        //定位第一行的图片
        if (i < columnCount) {
          item[i].style.top = "0px";
          item[i].style.left = i * width + "px";
          hrr.push(item[i].offsetHeight);
        } else {
          //第一行之后的
          //选择总高度最小的列
          let min = Math.min(...hrr);
          let index = hrr.indexOf(min);
          //将每个元素定位到当前总高度最小的列下
          item[i].style.top = min + "px";
          item[i].style.left = index * width + "px";
          //当前定位的元素加入该列
          hrr[index] += item[i].offsetHeight;
        }
      }
    }
  },
  methods: {
    handerDrawer(item) {
      this.drawer = true;
      this.drawerTitle=item
    },
    handerAdd() {
      this.$message({
        message: "成功",
        type: "success",
      });
      this.drawer = false;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>

<style scoped>
.records-header {
  padding: 30px 30px 0px 20px;
}
.el-form {
  width: 90%;
}
.el-form .el-button {
  width: 100%;
}
.container {
  position: relative;
  margin: auto;
  width: 100%;
}
.item {
  width: 24%;
  /* max-width: 400px; */
  min-width: 200px;
  height: auto;
  position: absolute;
  /* background-color: chartreuse; */
  /* height: 200px; */
  display: inline-block;
  color: #fff;
}

.title {
  margin: 20px 20px 0px 20px;
  min-height: 50px;
  line-height: 50px;
  padding: 0px 20px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  cursor: pointer;
  /* background-color: cornsilk; */
}

.content {
  margin: 0px 20px 0px 20px;
  height: auto;
  min-height: 50px;
  padding: 20px 20px;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  cursor: pointer;
  /* background-color: cornsilk; */
}

.item:nth-child(2n) .title,
.item:nth-child(2n) .content {
  background-color: rgb(138, 138, 141);
  box-shadow: 5px 5px 5px rgb(138, 138, 141);
}
.item:nth-child(n + 3) .title,
.item:nth-child(n + 3) .content {
  background-color: rgb(235, 205, 161);
  box-shadow: 5px 5px 5px rgb(250, 236, 216);
}
.item:nth-child(2n + 3) .title,
.item:nth-child(2n + 3) .content {
  background-color: rgb(184, 228, 160);
  box-shadow: 5px 5px 5px rgb(240, 249, 235);
}
.item:nth-child(3n + 8) .title,
.item:nth-child(3n + 8) .content {
  background-color: rgb(253, 226, 226);
  box-shadow: 5px 5px 5px rgb(253, 226, 226);
}
.item:nth-child(3n + 1) .title,
.item:nth-child(3n + 1) .content {
  background-color: rgba(130, 181, 236, 1);
  box-shadow: 5px 5px 5px rgb(130, 181, 236, 0.651);
}
</style>